<template>
    <div class="home">
        <main class="wrap">
        <section class="main">
            <div class="content-main">
                <div class="contentBox bannerBox">
                    <section class="articleBox">
                        <router-link to="" class="imgBox bgBox1" @click="toDeatil(mainArticle)" :title="mainArticle.newsTitle">
                            <div class="bgImg bgBox1 bgImgTrans"
                                :style="{'background-image':`url(${mainArticle.imgUrl})`}"
                                :alt="mainArticle.newsTitle"></div>
                        </router-link>
                        <div class="mask">
                            <div class="contentText">
                                <div class="typeBtn">
                                    <route-link :to="{path:`/category/${mainArticle.classfy}`}" href="./category/index.html">
                                        {{mainArticle.classfy.toUpperCase()}}
                                    </route-link>
                                </div>
                                <h2 class="titleText">
                                    <route-link to="" href="./detail/index.html"> {{ mainArticle.newsTitle }}</route-link>
                                </h2>
                                <div class="publicTime">
                                    <route-link to="" href="./authorPublic/index.html">
                                        {{ mainArticle.author }}
                                    </route-link>
                                    <time :datetime="mainArticle.publicTime">{{mainArticle.publicTime}}</time>
                                </div>
                            </div>

                        </div>
                    </section>
                </div>

                <section class="contentBox swiperArticle">
                    <article class="posts" v-for="(item ,index) in trendingArticles" :key="item.id" >
                        <div class="media">
                            <router-link to='' @click="toDeatil(item)" :title='`./detail/${item.newsTitle}`'>
                                <div class="bgImg bgBox2 lazyloaded"
                                    :data-bgset="`${item.imgUrl} 350w, ${item.imgUrl} 750w`"
                                    :data-bgsrc="item.imgUrl"
                                    data-sizes="(max-width: 3.61rem) 100vw, 3.61rem"
                                    :style="{'background-image':`url(${item.imgUrl})`}"
                                   >
                                </div>
                            </router-link>
                        </div>
                        <div class="contentText">
                            <h2>
                                <a href="./detail/index.html" >
                                    {{ item.newsTitle }}
                                </a>
                            </h2>
                        </div>
                    </article>

                </section>

                <section class="contentBox category_travel">
                    <div class="categoryTitle">
                        <h2 class="heading">
                            <router-link to="/category/travel">
                                TRAVEL
                            </router-link>
                        </h2>
                        <router-link class="view-more" to="/category/travel">
                            more related Travel
                            </router-link>
                    </div>
                    <div class="category_content">
                        <article class="posts mainRecommnd" v-for="item in 2">
                            <div class="media">
                                <router-link to="" @click="toDeatil(travelArticleList[item - 1])" :title="travelArticleList[item - 1].newsTitle">
                                    <div class="bgImg bgBox3 lazyloaded "
                                    :data-bgset="`${travelArticleList[item - 1].imgUrl} 450w, ${travelArticleList[item - 1].imgUrl} 450w`"
                                    :data-bgsrc="travelArticleList[item - 1].imgUrl"
                                    :style="{'background-image':`url(${travelArticleList[item - 1].imgUrl})`}">
                                    </div>
                                </router-link>
                                <div class="typeBtn">
                                    <router-link to="/" @click="toDeatil(travelArticleList[item - 1])" >
                                        {{ travelArticleList[item - 1].classfy.toUpperCase() }}
                                    </router-link>
                                </div>
                            </div>
                            <div class="contentText">
                                <h2>
                                    <router-link  to="/" @click="toDeatil(travelArticleList[item - 1])">
                                        {{ travelArticleList[item - 1].newsTitle }}
                                    </router-link>
                                </h2>
                                <p class="desc">
                                    {{ travelArticleList[item - 1].seoText }}
                                </p>
                            </div>
                        </article>
                    </div>
                    <div class="category_subContent">
                        <article class="post subPosts" v-for="item in travelArticleList.slice(2,travelArticleList.length)">
                            <div class="media">
                                <router-link to="/" @click="toDeatil(item)" :title="item.newsTitle">
                                    <div class="bgImg bgBox4 lazyloaded"
                                        :data-bgset="`${item.imgUrl} 450w, ${item.imgUrl} 450w`"
                                        :data-bgsrc="item.imgUrl"
                                         data-sizes="(max-width: 1.35rem) 100vw, 1.35rem"
                                        :style="{'background-image':`url(${item.imgUrl})`}"
                                       >
                                    </div>
                                </router-link>
                            </div>
                            <div class="postsText">
                                <h4 class="postsTitle">
                                    <router-link to="/" @click="toDeatil(item)" >
                                       {{ item.newsTitle }}
                                    </router-link>
                                </h4>
                                <time class="postsDate" :datetime="item.publicTime">{{ item.publicTime }}</time>
                            </div>
                        </article>
                       
                    </div>
                </section>

                <section class="contentBox category_health">
                    <div class="categoryTitle">
                        <h2 class="heading">
                            <router-link to="/category/health">
                                Health
                            </router-link>
                        </h2>
                        <router-link class="view-more" to="/category/health">
                            more related Health
                        </router-link>
                    </div>
                    <div class="category_content">
                        <article class="articleBox" v-for="(item,index) in healthArticleList.slice(0,2)">
                            <router-link  to='/' @click="toDeatil(item)"  class="imgBox"  :title="item.newsTitle">
                                <div class="bgImg bgBox5 lazyloaded"
                                        :data-bgset="`${item.imgUrl} 450w, ${item.imgUrl} 450w`"
                                        :data-bgsrc="item.imgUrl"
                                        :style="{'background-image':`url(${item.imgUrl})`}"
                                    data-sizes="(max-width: 3.61rem) 100vw, 3.61rem"
                                    >
                                </div>
                            </router-link>
                            <div class="mask">
                                <div class="contentText">
                                    <div class="typeBtn">
                                        <router-link  to='/' @click="toDeatil(item)">
                                            {{ item.classfy.toUpperCase() }}
                                        </router-link >
                                    </div>
                                    <h2 class="titleText">
                                        <router-link  to='/' @click="toDeatil(item)">
                                           {{ item.newsTitle }}</router-link>
                                    </h2>
                                    <div class="publicTime">
                                        <router-link  to='/authorPublic' >
                                            {{ item.author }} -
                                        </router-link>
                                        <time :datetime="item.publicTime">{{ item.publicTime }}</time>
                                    </div>
                                </div>

                            </div>
                        </article>
                       
                    </div>
                </section>

                <section class="contentBox category_Trending">
                    <h4 class="trending_Title">
                        Popular Health
                    </h4>
                    <div class="category_subContent">
                        <article class="post subPosts" v-for="(item,index) in healthArticleList.slice(2,healthArticleList.length)" :key="item.id">
                            <div class="media">
                                <router-link  to='/' @click="toDeatil(item)"  class="imgBox"  :title="item.newsTitle">
                                    <div class="bgImg bgBox4 lazyloaded"
                                    :data-bgset="`${item.imgUrl} 450w, ${item.imgUrl} 450w`"
                                        :data-bgsrc="item.imgUrl"
                                        :style="{'background-image':`url(${item.imgUrl})`}"
                                        data-sizes="(max-width: 1.35rem) 100vw, 1.35rem"
                                       >
                                    </div>
                                </router-link>
                            </div>
                            <div class="postsText">
                                <h4 class="postsTitle">
                                    <router-link  to='/' @click="toDeatil(item)" >
                                        {{ item.newsTitle }}
                                    </router-link>

                                </h4>
                                <time class="postsDate" :datetime="item.publicTime">   {{ item.publicTime }}</time>
                            </div>
                        </article>
                     
                    </div>
                </section>

                <section class="contentBox category_LifeStyle">
                    <div class="categoryTitle">
                        <h2 class="heading">
                            <a href="./category/index.html">
                                LifeStyle
                            </a>
                        </h2>
                        <a class="view-more" href="./category/index.html">
                            more related LifeStyle
                        </a>
                    </div>
                    <div class="category_content">
                        <article class="posts mainRecommnd">
                            <div class="media">
                                <router-link to="/" @click="toDeatil(lifeStyleArticleList[0])"  :title="lifeStyleArticleList[0].newsTitle">
                                    <div class="bgImg bgBox3 lazyloaded "
                                        :data-bgset="`${lifeStyleArticleList[0].imgUrl} 450w, ${lifeStyleArticleList[0].imgUrl} 450w`"
                                        :data-bgsrc="lifeStyleArticleList[0].imgUrl"
                                        :style="{'background-image':`url(${lifeStyleArticleList[0].imgUrl})`}"
                                        data-sizes="(max-width: 3.61rem) 100vw, 3.61rem"
                                        >
                                    </div>
                                </router-link>
                                <div class="typeBtn">
                                    <router-link to="/" @click="toDeatil(lifeStyleArticleList[0])" >
                                        {{ lifeStyleArticleList[0].classfy.toUpperCase() }}
                                    </router-link>
                                </div>
                            </div>
                            <div class="contentText">
                                <h2>
                                    <router-link to="/" @click="toDeatil(lifeStyleArticleList[0])" >
                                        {{ lifeStyleArticleList[0].newsTitle }}
                                    </router-link>
                                </h2>
                                <a class="auther" href="./authorPublic/index.html">
                                    By {{ lifeStyleArticleList[0].author }} --
                                </a>
                                <time class="postsDate" :datetime="lifeStyleArticleList[0].publicTime">{{ lifeStyleArticleList[0].publicTime }}</time>
                                <p class="desc">
                                   {{ lifeStyleArticleList[0].seoText }}
                                </p>
                            </div>
                        </article>
                        <div class="life_right">
                            <article class="post subPosts" v-for="(item,index) in lifeStyleArticleList.slice(1,lifeStyleArticleList.length)" :key="item.id">
                                <div class="media">
                                    <router-link to="/" @click="toDeatil(item)" >
                                        <div class="bgImg bgBox4 lazyloaded"
                                        :data-bgset="`${item.imgUrl} 450w, ${item.imgUrl} 450w`"
                                        :data-bgsrc="item.imgUrl"
                                        :style="{'background-image':`url(${item.imgUrl})`}"
                                            data-sizes="(max-width: 1.35rem) 100vw, 1.35rem"
                                            >
                                        </div>
                                    </router-link>
                                </div>
                                <div class="postsText">
                                    <h4 class="postsTitle">
                                        <router-link to="/" @click="toDeatil(item)" >
                                                {{ item.newsTitle }}
                                        </router-link>
                                    </h4>

                                    <time class="postsDate" :datetime="item.publicTime">{{ item.publicTime }}</time>
                                </div>
                            </article>
                        </div>

                    </div>
                </section>
            </div>
            <div class="aside">
                <section class="relatedPosts">
                    <h1 class="relatedHeading">
                        Today's Trending Articles
                    </h1>
                    <article class="post subPosts" v-for="(item,index) in trendingArticles" :key="index">
                        <div class="postsText">
                            <h4 class="postsTitle">
                                <router-link to="/" @click="toDeatil(item)" >
                                        {{ item.newsTitle }}
                                    </router-link>
                            </h4>

                            <time class="postsDate" :datetime="item.publicTime">{{ item.publicTime }}</time>
                        </div>
                        <div class="media">
                            <router-link to="/" @click="toDeatil(item)" :title="item.newsTitle">
                                <div class="bgImg bgBox4 lazyloaded"
                                :data-bgset="`${item.imgUrl} 450w, ${item.imgUrl} 450w`"
                                        :data-bgsrc="item.imgUrl"
                                        :style="{'background-image':`url(${item.imgUrl})`}"
                                        data-sizes="(max-width: 1.35rem) 100vw, 1.35rem"
                                    >
                                </div>
                            </router-link>
                        </div>
                    </article>
                </section>
                <div class="AFC">
                    AFC广告
                </div>
            </div>
        </section>

        <section class="main_bottom">
            <div class="contentBox bannerBox">
                <section class="articleBox">
                    <router-link to="" @clikc="toDeatil(fashionArticleList[0])" class="imgBox bgBox1" :title="fashionArticleList[0].newsTitle">
                        <div class="bgImg bgBox1"
                        :data-bgset="`${fashionArticleList[0].imgUrl} 450w, ${fashionArticleList[0].imgUrl} 450w`"
                                        :data-bgsrc="fashionArticleList[0].imgUrl"
                                        :style="{'background-image':`url(${fashionArticleList[0].imgUrl})`}"
                                        data-sizes="(max-width: 1.35rem) 100vw, 1.35rem"></div>
                    </router-link>
                    <div class="mask">
                        <div class="contentText">
                            <div class="typeBtn">
                                <router-link to="" @clikc="toDeatil(fashionArticleList[0])" >
                                    {{fashionArticleList[0].classfy}}
                                </router-link>
                            </div>
                            <h2 class="titleText">
                                <router-link to="" @clikc="toDeatil(fashionArticleList[0])" >
                                    {{fashionArticleList[0].newsTitle}}
                                </router-link>
                            </h2>
                            <div class="publicTime">
                                <router-link to="" @clikc="toDeatil(fashionArticleList[0])" >
                                    {{ fashionArticleList[0].author }} - <time :datetime="fashionArticleList[0].publicTime">{{ fashionArticleList[0].publicTime }}</time>
                                    </router-link>
                            </div>
                        </div>

                    </div>
                </section>
            </div>
            <aside class="asidePosts">
                <article class="post subPosts" v-for="(item,index) in fashionArticleList.slice(1,6)">
                    <div class="media">
                        <router-link to="/" @click="toDeatil(item)" >
                                        <div class="bgImg bgBox4 lazyloaded"
                                        :data-bgset="`${item.imgUrl} 450w, ${item.imgUrl} 450w`"
                                        :data-bgsrc="item.imgUrl"
                                        :style="{'background-image':`url(${item.imgUrl})`}"
                                            data-sizes="(max-width: 1.35rem) 100vw, 1.35rem"
                                            >
                                        </div>
                                    </router-link>
                    </div>
                    <div class="postsText">
                        <h4 class="postsTitle">
                            <router-link to="/" @click="toDeatil(item)" >
                               {{ item.newsTitle }}
                            </router-link>
                        </h4>
                        <time class="postsDate" :datetime="item.publicTime">{{ item.publicTime }}</time>
                    </div>
                </article>
            </aside>
        </section>
        <section class="main_footer">
            <div class="leftBox">
                <section class="contentBox category_Finance">
                    <div class="categoryTitle">
                        <h2 class="heading">
                            <a href="./category/index.html">
                                Finance
                            </a>
                        </h2>
                        <a class="view-more" href="./category/index.html">
                            more related Finance
                        </a>
                    </div>
                    <div class="category_content">
                        <section class="articleBox">
                            <a class="imgBox" href="./detail/index.html" title="123123">
                                <div class="bgImg bgBox6 lazyloaded"
                                    data-bgset="https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg 450w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-300x200.jpg 300w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-750x500.jpg 750w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-768x512.jpg 768w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-150x100.jpg 150w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503.jpg 1000w"
                                    data-bgsrc="https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg"
                                    data-sizes="(max-width: 3.61rem) 100vw, 3.61rem"
                                    style="background-image: url(&quot;https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg&quot;);">
                                </div>
                            </a>
                            <div class="mask">
                                <div class="contentText">
                                    <div class="typeBtn">
                                        <a href="./category/index.html">
                                            FINESS
                                        </a>
                                    </div>
                                    <h2 class="titleText">
                                        <a href="./detail/index.html">
                                            Nature’s
                                            Gym: Unleashing the Power of
                                            Biophilia
                                            Workouts</a>
                                    </h2>
                                </div>

                            </div>
                        </section>
                        <section class="articleBox">
                            <a class="imgBox" href="./detail/index.html" title="123123">
                                <div class="bgImg bgBox6 lazyloaded"
                                    data-bgset="https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg 450w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-300x200.jpg 300w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-750x500.jpg 750w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-768x512.jpg 768w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-150x100.jpg 150w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503.jpg 1000w"
                                    data-bgsrc="https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg"
                                    data-sizes="(max-width: 3.61rem) 100vw, 3.61rem"
                                    style="background-image: url(&quot;https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg&quot;);">
                                </div>
                            </a>
                            <div class="mask">
                                <div class="contentText">
                                    <div class="typeBtn">
                                        <a href="./category/index.html">
                                            FINESS
                                        </a>
                                    </div>
                                    <h2 class="titleText">
                                        <a href="./detail/index.html">
                                            Nature’s
                                            Gym: Unleashing the Power of
                                            Biophilia
                                            Workouts</a>
                                    </h2>
                                </div>

                            </div>
                        </section>
                        <section class="articleBox">
                            <a class="imgBox" href="./detail/index.html" title="123123">
                                <div class="bgImg bgBox6 lazyloaded"
                                    data-bgset="https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg 450w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-300x200.jpg 300w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-750x500.jpg 750w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-768x512.jpg 768w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-150x100.jpg 150w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503.jpg 1000w"
                                    data-bgsrc="https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg"
                                    data-sizes="(max-width: 3.61rem) 100vw, 3.61rem"
                                    style="background-image: url(&quot;https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg&quot;);">
                                </div>
                            </a>
                            <div class="mask">
                                <div class="contentText">
                                    <div class="typeBtn">
                                        <a href="./category/index.html">
                                            FINESS
                                        </a>
                                    </div>
                                    <h2 class="titleText">
                                        <a href="./detail/index.html">
                                            Nature’s
                                            Gym: Unleashing the Power of
                                            Biophilia
                                            Workouts</a>
                                    </h2>
                                </div>

                            </div>
                        </section>
                        <section class="articleBox">
                            <a class="imgBox" href="./detail/index.html" title="123123">
                                <div class="bgImg bgBox6 lazyloaded"
                                    data-bgset="https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg 450w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-300x200.jpg 300w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-750x500.jpg 750w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-768x512.jpg 768w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-150x100.jpg 150w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503.jpg 1000w"
                                    data-bgsrc="https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg"
                                    data-sizes="(max-width: 3.61rem) 100vw, 3.61rem"
                                    style="background-image: url(&quot;https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg&quot;);">
                                </div>
                            </a>
                            <div class="mask">
                                <div class="contentText">
                                    <div class="typeBtn">
                                        <a href="./category/index.html">
                                            FINESS
                                        </a>
                                    </div>
                                    <h2 class="titleText">
                                        <a href="./detail/index.html">
                                            Nature’s
                                            Gym: Unleashing the Power of
                                            Biophilia
                                            Workouts</a>
                                    </h2>
                                </div>

                            </div>
                        </section>
                        <section class="articleBox">
                            <a class="imgBox" href="./detail/index.html" title="123123">
                                <div class="bgImg bgBox6 lazyloaded"
                                    data-bgset="https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg 450w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-300x200.jpg 300w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-750x500.jpg 750w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-768x512.jpg 768w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-150x100.jpg 150w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503.jpg 1000w"
                                    data-bgsrc="https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg"
                                    data-sizes="(max-width: 3.61rem) 100vw, 3.61rem"
                                    style="background-image: url(&quot;https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg&quot;);">
                                </div>
                            </a>
                            <div class="mask">
                                <div class="contentText">
                                    <div class="typeBtn">
                                        <a href="./category/index.html">
                                            FINESS
                                        </a>
                                    </div>
                                    <h2 class="titleText">
                                        <a href="./detail/index.html">
                                            Nature’s
                                            Gym: Unleashing the Power of
                                            Biophilia
                                            Workouts</a>
                                    </h2>
                                </div>

                            </div>
                        </section>
                        <section class="articleBox">
                            <a class="imgBox" href="./detail/index.html" title="123123">
                                <div class="bgImg bgBox6 lazyloaded"
                                    data-bgset="https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg 450w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-300x200.jpg 300w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-750x500.jpg 750w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-768x512.jpg 768w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-150x100.jpg 150w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503.jpg 1000w"
                                    data-bgsrc="https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg"
                                    data-sizes="(max-width: 3.61rem) 100vw, 3.61rem"
                                    style="background-image: url(&quot;https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg&quot;);">
                                </div>
                            </a>
                            <div class="mask">
                                <div class="contentText">
                                    <div class="typeBtn">
                                        <a href="./category/index.html">
                                            FINESS
                                        </a>
                                    </div>
                                    <h2 class="titleText">
                                        <a href="./detail/index.html">
                                            Nature’s
                                            Gym: Unleashing the Power of
                                            Biophilia
                                            Workouts</a>
                                    </h2>
                                </div>

                            </div>
                        </section>
                    </div>
                </section>
            </div>
            <aside class="auto">
                <section class="contentBox category_auto">
                    <div class="categoryTitle">
                        <h2 class="heading">
                            <a href="./category/index.html">
                                AUTO
                            </a>
                        </h2>
                    </div>
                    <article class="posts mainRecommnd" >
                        <div class="media">
                            <router-link to="/" @click="toDeatil(autoArticleList[0])"  :title="autoArticleList[0].newsTitle">
                                <div class="bgImg bgBox3 lazyloaded "
                                        :data-bgset="`${autoArticleList[0].imgUrl} 450w, ${autoArticleList[0].imgUrl} 450w`"
                                        :data-bgsrc="autoArticleList[0].imgUrl"
                                        :style="{'background-image':`url(${autoArticleList[0].imgUrl})`}"
                                        data-sizes="(max-width: 3.61rem) 100vw, 3.61rem"
                                   >
                                </div>
                            </router-link>
                            <div class="typeBtn">
                                <router-link to="/" @click="toDeatil(autoArticleList[0])" >
                                   {{  autoArticleList[0].classfy}}
                                </router-link>
                            </div>
                        </div>
                        <div class="contentText">
                            <h2>
                                <router-link to="/" @click="toDeatil(autoArticleList[0])" >
                                   {{  autoArticleList[0].newsTitle}}
                                </router-link>
                            </h2>
                        </div>
                    </article>
                    <article class="post subPosts" v-for="(item,index) in autoArticleList.slice(1,3)" :key="index">
                        <div class="postsText">
                            <h4 class="postsTitle">
                                <router-link to="/" @click="toDeatil(autoArticleList[0])" >
                                   {{  autoArticleList[0].newsTitle}}
                                </router-link>
                            </h4>

                            <time class="postsDate" :datetime="item.publicTime">
                                {{ item.publicTime }}
                            </time>
                        </div>
                        <div class="media">
                            <a href="./detail/index.html" title="9 Things to Understand About Arthritis">
                                <div class="bgImg bgBox4 lazyloaded"
                                :data-bgset="`${item.imgUrl} 450w, ${item.imgUrl} 450w`"
                                        :data-bgsrc="item.imgUrl"
                                        :style="{'background-image':`url(${item.imgUrl})`}"
                                    data-sizes="(max-width: 1.35rem) 100vw, 1.35rem">
                                </div>
                            </a>
                        </div>
                    </article>
                </section>
            </aside>
        </section>
    </main>
    </div>
</template>

<script setup>
import {ref,toRef,onMounted,inject} from 'vue'
import { useRouter } from 'vue-router'
import { articleData,createDate } from '@/utils/common.js'

// // 所有作者名字
// const authorList = [
//             " John Smith", " Emma Johnson", " Michael Brown", " Olivia Davis", " William Wilson", " Sophia Martinez", " James Anderson", " Isabella Taylor", " Benjamin Thomas", " Mia Moore", " Lucas Jackson", " Amelia White", " Henry Harris", " Charlotte Martin", " Alexander Thompson", " Harper Garcia", " Daniel Martinez", " Evelyn Robinson", " Matthew Clark", " Abigail Lewis", " Joseph Walker", " Emily Hall", " David Allen", " Lily Young", " Samuel King", " Grace Wright", " Andrew Scott", " Chloe Green", " Joshua Adams", " Zoe Baker"
//         ]
// for(let i in articleData){
//     for(let j in articleData[i]){
//         articleData[i][j].author = authorList[Math.floor(Math.random() * authorList.length)];
//         articleData[i][j].publicTime = createDate()
//     }
// }

const router = useRouter()

// 共享侧边栏
const trendingArticles = inject("trendingArticles")


// 大图
const mainArticle = toRef(articleData['fashion'][articleData['fashion'].length - 1])

// 大图下方
let swiperArticleList = toRef(articleData['fashion'].filter((item,index) =>{
    return index < 5
}))

// 各分类数据
let travelArticleList = toRef(articleData['travel'].filter((item,index) =>{
    return index < 5
}))
const healthArticleList = toRef(articleData['health'])

const lifeStyleArticleList = toRef(articleData['lifeStyle'])

const autoArticleList = toRef(articleData['auto'])

const fashionArticleList = toRef(articleData['fashion'])


const toDeatil = (item) =>{
    let title = item.newsTitle.replaceAll(' ', '-')
    router.push(`/detail/${item.classfy}/${title}/${item.id}`)
}

</script>

<style lang="scss">
$border-color1:#e2e2e2;
$text_color1:#45414b;
$lite_posts:.17rem;
$date_color:rgb(138,138,138);


// 所有文章图片公共样式
.bgImg{
    background-position: center center;
    transition: all 1s;
    background-size: cover;
    &:hover{
        opacity: .75;
    }
}
.bgImgTrans{
    background-size: 100%;
}
// 图片阴影
.mask{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0,0,0,.2);
    box-shadow: 0 0 2rem 2rem rgba(0,0,0,.2);
    display: flex;
    align-items: flex-end;
    .contentText{
        color: rgba(239,239,239);
        .typeBtn{
            a{
                display: inline-block;
                padding: .1rem;
                background-color: $text_color1;
                &:hover{
                    background-color: #393440;
                }
            }
            margin-bottom: .06rem;
        }
        .titleText{
            margin: .13rem 0;
        }
        .publicTime{
            color: rgba(239,239,239);
        }
        a{
            color: rgba(239,239,239);
            &:hover{
                color: #fff;
            }
        }
    }
}

// 分类小文章
.category_subContent{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
   
}
// 具体小文章
.subPosts{
    display: flex;
    width: 3.67rem;
    height: .7rem;
    margin-bottom: .2rem;
    .media{
        margin-right: .2rem;
      
        
    }
    .postsText{
        padding: .04rem 0;
        .postsTitle{
            margin-bottom: .1rem;
        }
        .postsDate{
            font-size: .12rem;
            color: $date_color;
        }
    }
}
// 横线
.line{
    width: 100%;
    height: .01rem;
    background-color: $border-color1;
}
// 分类按钮
.typeBtn{
    font-size: .1rem;
    a{
        display: inline-block;
        padding: .06rem;
        color: $border-color1;
        background-color: $text_color1;
        &:hover{
            background-color: #393440;
        }
    }
}

// 上面都是全局样式

.main{
    display: flex;
    justify-content: space-between;
    margin-top: .35rem;
    // 主页左边css样式
    .content-main{
        width: 8.1rem;
        padding: 0 .2rem;
        .contentBox{
            width: 7.7rem;
            margin-bottom: .2rem;
            section{
                cursor: pointer;
                position: relative;
                font-size: 0;
                overflow: hidden;
                &:hover{
                    .imgBox{
                        .bgImg{
                            background-size: 105%;
                        }
                    }
                }
                .imgBox{
                    display: inline-block;
                    .bgImg{
                        
                    }
                }
                .mask{
                    // height: 4.05rem;
                    .contentText{
                        padding: .2rem;
                        .typeBtn{
                            a{
                                padding: .1rem;
                                font-size: .1rem;
                            }
                            margin-bottom: .06rem;
                        }
                        .titleText{
                            font-size: .28rem;
                        }
                        .publicTime{
                            font-size: .1rem;
                        }
                        
                    }
                }
               
            }
        }
        .swiperArticle{
            display: flex;
            justify-content: space-around;
            article{
                width: 1.38rem;
                .media{
                    margin-bottom: .16rem;
                    a{
                        .bgImg{
                            // height: .82rem;
                            // width: 1.38rem;
                            &:hover{
                                opacity: .65;
                            }
                        }
                    }
                }
                .contentText{
                    line-height: 1.5;
                    font-size: .14rem;
                    font-weight: 600;
                    width: 100%;
                    height: .38rem;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    text-overflow: ellipsis;
                }
            }
        }
        .category_travel{
            .category_content{
                display: flex;
                justify-content: space-between;
                height: 4.3rem;
                .mainRecommnd{
                    width: 3.67rem;
                    margin-bottom: .2rem;
                    .media{
                    position: relative;
                .bgImg{
                   
                }
                .typeBtn{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                }
            }
             
                    .contentText{
                        h2{
                            margin: .16rem 0;
                            a{
                                font-size: $lite_posts;
                            }
                        }
                        p{
                            font-size: $lite_posts;
                            font-weight: 400;
                            color: rgb(80,80,80);
                        }
                    }
                }
            }
        }
       
        .category_health{
            .category_content{
                display: flex;
                justify-content: space-between;
                .articleBox{
                position: relative;
                overflow: hidden;
                    width: 3.67rem;
                    height: 2.45rem;
                    .imgBox{
                        height: 2.45rem;
                    }
                    .mask{
                        left: .1rem;
                        bottom: .1rem;
                        .contentText{
                            padding: 0;
                            .typeBtn{
                                a{
                                    padding: .04rem;
                                }
                            }
                            .titleText{
                                margin: .06rem 0;
                                width: 80%;
                                line-height: 1;
                                a{
                                    font-size: $lite_posts;
                                }
                            }
                        }
                       
                    }
                }
            }
        }
        .category_Trending{
            .trending_Title{
                margin: .3rem 0;
                padding: .1rem .14rem;
                background: #fbfbfb;
                color: $text_color1;
                text-transform: uppercase;
                border: .01rem solid #e8e8e8;
                border-bottom-width: .02rem;
                border-left: 0;
                border-right: 0;


            }
        
        }
        .category_LifeStyle{
            .category_content{
                display: flex;
                justify-content: space-between;
                .mainRecommnd{
                    width: 3.67rem;
                    .media{
                    position: relative;
                    .typeBtn{
                        position: absolute;
                        bottom: .01rem;
                        a{
                            padding: .04rem;
                            color: #e2e2e2;
                        }
                    }
                    }
                   .contentText{
                        h2{
                            font-size: $lite_posts;
                            font-weight: 600;
                            line-height: 1.5;
                            margin: .09rem 0;
                        }
                        .auther{
                            color: $date_color;

                        }
                        .postsDate{
                            color: $date_color;
                            font-size: .12rem;
                        }
                        .desc{
                            font-size: $lite_posts;
                            margin-top: .16rem;
                            color: #808080;
                        }
                   }
                }
                .life_right{
                    .subPosts{
                        margin-bottom: .4rem;
                        position: relative;
                        &::after{
                            content: '';
                            position: absolute;
                            bottom: -0.2rem;
                            display: block;
                            width: 100%;
                            height: .01rem;
                            background-color: #e2e2e2;
                        }
                    }
                }
            }
        }
    }
    .aside{
        position: sticky;
        top: 0rem;
        height: min-content;
        width: 3.9rem;
        padding: 0 .18rem 0 .26rem;
        .relatedPosts{
            .relatedHeading{
                display: inline-block;
                margin-bottom: .01rem;
                padding: .09rem .14rem;
                border-radius: .02rem;
                color: #fff;
                background: #D82A50;
                font-size: .14rem;
                font-weight: 600;
                line-height: 1;
                text-transform: uppercase;
                letter-spacing: 0.025em;
            }
            .subPosts{
                margin-top: .3rem;
            }
        }
      
    }
}
.main_bottom{
    display: flex;
    justify-content: space-between;
    background-color: #000000;
    overflow: hidden;
    .bannerBox{
        width: 7.7rem;
        height: 4.65rem;
        .articleBox{
            position: relative;
            .bgBox1{
                height: 4.65rem;
            }
            .mask{
                .contentText{
                    position: absolute;
                    bottom: .2rem;
                    left: .2rem;
                    .typeBtn{
                        font-size: .14rem;
                    }
                    .titleText{
                        font-size: .28rem;
                    }
                }
            }
        }
      
    }
    .asidePosts{
       padding:.25rem .25rem .2rem 0;
        .subPosts{
            margin-bottom: .17rem;
            &:nth-child(5){
                margin-bottom: 0;
            }

            .bgImg{
                background-size: cover;
            }
            .postsTitle{
                a{
                    color: #e8e8e8;
                }
            }
        }
    }
}
.main_footer{
    display: flex;
    justify-content: space-between;
    .leftBox{
        width: 7.7rem;
        .category_content{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .articleBox{
                position: relative;
                overflow: hidden;
                &:nth-child(n+4){
                    margin-top: .1rem;
                }
                .bgImg{
                    background-size: cover;
                }
                .contentText{
                    .titleText{
                        margin: .04rem 0;
                    }
                    .typeBtn{
                        a{
                        padding: .04rem;
                        }
                    }
                }
              
            }
        }
        
    }
    .auto{
        width: 4.3rem;
        padding-left: .4rem;
        .category_auto{
            .mainRecommnd{
                .media{
                    position: relative;
                    .bgBox3{
                        width: 3.89rem;
                        height: 2rem;
                    }
                    .typeBtn{
                        position: absolute;
                        bottom: 0;
                    }
                }
                .contentText{
                    h2{
                        font-size: .17rem;
                        font-weight: 600;
                        line-height: 1.5;
                        margin: .09rem 0;
                    }
                }
                
            }
            .subPosts{
                width: 4.08rem;
            }
        }
    }
}

</style>